<template>
	<view class="bg">
		<!-- 卡信息 -->
		<view class="card-line">
			<img :src="logo" class="img-logo" v-if="dictDisplayLogoType!='DISPLAY_NONE_LOG'" />
			<text>{{cardNumber}}</text>
		</view>
		<!-- 实名状态 & 卡状态 & 卡余额 -->
		<view class="status-line">
			<view :class="[card.realName=='C_YES'?'div-item-status-shiming':'div-item-status-info','div-item-status']" v-if="card.realName">				
				<i class="iconfont">&#xe620;</i>
				<span v-if='!card.realName'>未知实名状态</span>
				<span v-if="card.realName=='C_YES'">已实名</span>
				<span v-if="card.realName=='C_NO'">未实名</span>
			</view>
			<view :class="['div-item-status', card.statusBg]">
				<i class="iconfont" style="margin-right: 10upx;">&#xea98;</i>卡板
				<span v-if='card.dictChannelCardStatusName&&card.dictChannelCardStatusName!="--"'>{{card.dictChannelCardStatusName}}</span>
				<span v-if='card.dictChannelCardStatusName=="--"||card.dictChannelCardStatusName==""||card.dictChannelCardStatusName==null'>状态未知</span>
			</view>
			<view class="div-item-status div-item-status-primary">
				<i class="iconfont icon-chongzhi1" style="margin-right: 10upx;"></i>
				<text>余额￥{{card.balance}}元</text>
			</view>
		</view>
		<!-- 流量使用情况 -->
		<view class="flow-block">
			<view class="flow-block-bottom" v-if="card.dictCardType=='DONGLE'&&(batteryFlag||wifiStatusFlag)">
				<view class="flow-block-bottom-obj">
					<view v-if="wifiStatusFlag">设备信号</view>
					<view class="flow-block-bottom-wifi" v-if="wifiStatusFlag">
						<view class="one" :style="{'background-color':wifiStatus=='good'||wifiStatus=='normal'||wifiStatus=='weak'||wifiStatus=='bad'?'#4CD964':'#999'}"></view>
						<view class="two" :style="{'background-color':wifiStatus=='good'||wifiStatus=='normal'||wifiStatus=='weak'?'#4CD964':'#999'}"></view>
						<view class="three" :style="{'background-color':wifiStatus=='good'||wifiStatus=='normal'?'#4CD964':'#999'}"></view>
						<view class="four" :style="{'background-color':wifiStatus=='good'?'#4CD964':'#999'}"></view>
					</view>
					<view v-if="!wifiStatusFlag">暂不支持设备信号查询</view>
					<!-- <view class="flow-block-bottom-wifi">
						<p :class="['wifi-circle','first',wifiStatus=='good'?'first_animate':'']" ></p>
						<p :class="['wifi-circle','second',wifiStatus=='good'||wifiStatus=='normal'?'second_animate':'']" ></p>
						<p :class="['wifi-circle','third',wifiStatus=='good'||wifiStatus=='normal'||wifiStatus=='weak'?'third_animate':'']" ></p>
						<p class="wifi-circle fourth "></p>
					</view> -->
				</view>
				<view class="flow-block-bottom-obj" style="justify-content: flex-end;">
					<view v-if="batteryFlag">电池电量</view>
					<view class="battery-container" v-if="batteryFlag">
						<view class="battery-head"></view>
						<view class="battery-body">
							<view class="battery-content" :style="{'height': batteryHeight }" ></view>
						</view>
					</view>
					<view style="margin-left: 6upx;" v-if="batteryFlag">{{batteryHeight}}</view>
					<view v-if="!batteryFlag">暂不支持电量查询</view>
					
				</view>
			</view>
			<view class="flow-block-top" :style="{'border-top': card.dictCardType=='DONGLE'?'1px solid #f2f2f2':'none'}">
				<view class="flow-block-top-item">
					<view class="flow-block-top-item-num">{{card.totalMb}}</view>
					<view class="flow-block-top-item-text">总量</view>
				</view>
				<view class="flow-block-top-body">
					<view class="circle" :style="{'background': 'conic-gradient(rgba(0,0,0,0.1) 0,rgba(0,0,0,0.1) '+p2+',#3791FF -220deg,#3791FF '+p3+',#3791FF 100%)','transform': 'rotateZ('+p1+')'}"></view>
					<view class="sss">
						<view class="flow-block-top-item-num">{{card.residue}}</view>
						<view class="flow-block-top-item-text">剩余</view>
					</view>
					<!-- <view class="flow-block-top-item-circle"> -->
					<!-- <cmd-progress type="circle" :percent="card.percentage" stroke-color="#408CFF" :stroke-width="5" :width="90" :showInfo="false"></cmd-progress> -->

					<!-- <view class="sss">
					    <view class="flow-block-top-item-num">{{card.residue}}</view>
					    <view class="flow-block-top-item-text">剩余</view>
					  </view> -->
					<!-- </view> -->
				</view>
				<view class="flow-block-top-item">
					<view class="flow-block-top-item-num">{{card.usedFlow}}</view>
					<view class="flow-block-top-item-text">已使用</view>
				</view>
			</view>
			<view class="flow-block-bottom">
				<view v-if="card.expirationDate!='--'">{{card.expirationDate}}到期</view>
				<view class="flow-block-bottom-btn" @click="checkEnableOrdersList">
					<picker @change="enableChange" :value="index" :range="cardList" range-key="name" v-if="cardList.length>0">
						待启用套餐<i class="iconfont icon-chakan" style="margin-left: 10upx;"></i>
					</picker>
					<text v-if="cardList.length==0">待启用套餐<i class="iconfont icon-chakan" style="margin-left: 10upx;"></i></text>
				</view>
			</view>
		</view>
		<!-- 其余按钮 -->
		<!-- <view class="btn-line">
			<view class="btn-line-item" @click="goToRechargeSetmeal">
				<view class="btn-line-item-icon"><i class="iconfont icon-yue"></i></view>
				<text class="btn-line-item-text">充值余额</text>
			</view>
			<view class="btn-line-item" @click="goToRecharge">
				<view class="btn-line-item-icon"><i class="iconfont icon-chongzhi1"></i></view>
				<text class="btn-line-item-text">订购套餐</text>
			</view>
			<view class="btn-line-item" @click="gotoOrder('/pages/tabbar/order/orderList','balance')">
				<view class="btn-line-item-icon"><i class="iconfont icon-chongzhi"></i></view>
				<text class="btn-line-item-text">余额订单</text>
			</view>
			<view class="btn-line-item" @click="gotoOrder('/pages/tabbar/order/orderList','package')">
				<view class="btn-line-item-icon"><i class="iconfont icon-layer"></i></view>
				<text class="btn-line-item-text">套餐订单</text>
			</view>
			<view class="btn-line-item" @click="goToOtherPage('/pages/controlLog/cardLogs')">
				<view class="btn-line-item-icon"><i class="iconfont icon-order"></i></view>
				<text class="btn-line-item-text">操作日志</text>
			</view>
			<view class="btn-line-item" @click="goToRealNamePage" v-if="showRealNameBtn">
				<view class="btn-line-item-icon"><i class="iconfont icon-shiming"></i></view>
				<text class="btn-line-item-text">实名认证</text>
			</view>
			<view class="btn-line-item" @click="goToOpen" v-if="showOpenBtn">
				<view class="btn-line-item-icon"><i class="iconfont icon-liuliang"></i></view>
				<text class="btn-line-item-text">自动开机</text>
			</view>
			
			<view class="btn-line-item" @click="goToOtherPage('/pages/other/updatePassword/updatePassword')">
				<view class="btn-line-item-icon"><i class="iconfont icon-mima2"></i></view>
				<text class="btn-line-item-text">密码管理</text>
			</view>
			<view class="btn-line-item" @click="changeCardRemark">
				<view class="btn-line-item-icon"><i class="iconfont icon-beizhu"></i></view>
				<text class="btn-line-item-text">修改备注</text>
			</view>
			<view class="btn-line-item" v-if="card.dictOperator=='TELECOM'||card.dictOperator=='CMPTELECOM'||card.dictOperator=='HEYOUWULIAN'||card.dictOperator=='ZHANGZHONG'"
			 @click="goToBindPage('/pages/cardBindMobile/newIndex')">
				<view class="btn-line-item-icon"><i class="iconfont icon-binding01-copy"></i></view>
				<text class="btn-line-item-text">机卡重绑</text>
			</view>
			<view class="btn-line-item" @click="goToWifiAct('showExchangeDialog')" v-show="showWifiExchange">
				<view class="btn-line-item-icon"><i class="iconfont icon-000-wangluoshezhi-05"></i></view>
				<text class="btn-line-item-text">切换运营商</text>
			</view>
			<view class="btn-line-item" @click="goToWifiAct('showDialog')" v-show="showWifiSettlement">
				<view class="btn-line-item-icon"><i class="iconfont icon--wuxian-"></i></view>
				<text class="btn-line-item-text">WiFi设置</text>
			</view>
			<view v-for="item in num" :key="item" v-if="num>0">
			 	<view class="btn-line-item">
			 		<view class="btn-line-item-icon-none"><i class="iconfont icon-taocanbanben"></i></view>
			 		<text class="btn-line-item-text">待开发</text>
			 	</view>
			</view>
			
			
			
			 <view class="btn-line-item" @click="goToOtherPage('/pages/flowStatic/flowStatic')">
				<view class="btn-line-item-icon"><i class="iconfont icon-liuliang1"></i></view>				
				<text class="btn-line-item-text">流量详情</text>
			</view> 
			 <view class="btn-line-item" @click="goToWifiAct('showUpdatePasswordDialog')" v-show="showWifiPassword">
				<view class="btn-line-item-icon"><i class="iconfont icon-xiugaimima"></i></view>
				<text class="btn-line-item-text">修改WiFi密码</text>
			</view>
			<view class="btn-line-item" @click="goToWifiAct('showWifiHideDialog')" v-show="showWifiHide">
				<view class="btn-line-item-icon"><i class="iconfont icon-xiugaimingcheng"></i></view>
				<text class="btn-line-item-text">隐藏热点</text>
			</view>
			
		</view> -->
		<!-- 新版卡操作按钮 -->
		<view class="actBlock">
			<view class="actLabel">充值管理</view>
			<view class="actLine"></view>
			<view class="btn-line_new">
				<view class="btn-line-item_new" @click="goToRechargeSetmeal">
					<view class="btn-line-item-icon"><i class="iconfont icon-chongzhi2"></i></view>
					<text class="btn-line-item-text">充值余额</text>
				</view>
				<view class="btn-line-item_new" @click="goToRecharge">
					<view class="btn-line-item-icon"><i class="iconfont icon-yue1"></i></view>
					<text class="btn-line-item-text">订购套餐</text>
				</view>
			</view>
			<view class="actLabel">记录查询</view>
			<view class="actLine"></view>
			<view class="btn-line_new">
				<view class="btn-line-item_new" @click="gotoOrder('/pages/tabbar/order/orderList','balance')">
					<view class="btn-line-item-icon"><i class="iconfont icon-chongzhi"></i></view>
					<text class="btn-line-item-text">余额记录</text>
				</view>
				<view class="btn-line-item_new" @click="gotoOrder('/pages/tabbar/order/orderList','package')">
					<view class="btn-line-item-icon"><i class="iconfont icon-layer"></i></view>
					<text class="btn-line-item-text">订单记录</text>
				</view>
				<view class="btn-line-item_new" @click="goToOtherPage('/pages/controlLog/cardLogs')">
					<view class="btn-line-item-icon"><i class="iconfont icon-icon-2"></i></view>
					<text class="btn-line-item-text">操作日志</text>
				</view>
			</view>
			<view class="actLabel">安全管理</view>
			<view class="actLine"></view>
			<view class="btn-line_new">
				<view class="btn-line-item_new" @click="goToOtherPage('/pages/other/updatePassword/updatePassword')">
					<view class="btn-line-item-icon"><i class="iconfont icon-mima"></i></view>
					<text class="btn-line-item-text">密码管理</text>
				</view>
				<view class="btn-line-item_new" @click="changeCardRemark">
					<view class="btn-line-item-icon"><i class="iconfont icon-beizhu"></i></view>
					<text class="btn-line-item-text">修改备注</text>
				</view>
				<view class="btn-line-item_new" @click="goToBindPage('/pages/cardBindMobile/newIndex')" v-if="card.dictOperator=='TELECOM'||card.dictOperator=='CMPTELECOM'||card.dictOperator=='HEYOUWULIAN'||card.dictOperator=='ZHANGZHONG'||card.dictOperator=='TIANYI'">
					<view class="btn-line-item-icon"><i class="iconfont icon-binding01-copy"></i></view>
					<text class="btn-line-item-text">机卡重绑</text>
				</view>
				<view class="btn-line-item_new" @click="goToBootUp" v-show="showOpenBtn">
					<view class="btn-line-item-icon"><i class="iconfont icon-shouji"></i></view>
					<text class="btn-line-item-text">重新开机</text>
				</view>
				<view class="btn-line-item_new" @click="goToRealNamePage" v-if="showRealNameBtn">
					<view class="btn-line-item-icon"><i class="iconfont icon-shiming"></i></view>
					<text class="btn-line-item-text">实名认证</text>
				</view>
				<view class="btn-line-item_new" @click="goToDelete">
					<view class="btn-line-item-icon"><i class="iconfont icon-yangbenshanchu"></i></view>
					<text class="btn-line-item-text">删除设备</text>
				</view>
			</view>
			<view class="actLabel" v-show="showWifiExchange||showWifiSettlement">WiFi管理</view>
			<view class="actLine" v-show="showWifiExchange||showWifiSettlement"></view>
			<view class="btn-line_new" >
				<view class="btn-line-item_new" @click="goToWifiAct('showExchangeDialog')" v-show="showWifiExchange">
					<view class="btn-line-item-icon"><i class="iconfont icon-000-wangluoshezhi-05"></i></view>
					<text class="btn-line-item-text">切换运营商</text>
				</view>
				<view class="btn-line-item_new" @click="goToWifiAct('showDialog')" v-show="showWifiSettlement">
					<view class="btn-line-item-icon"><i class="iconfont icon--wuxian-"></i></view>
					<text class="btn-line-item-text">WiFi设置</text>
				</view>
			</view>
		</view>
		
		<!-- 修改备注弹窗 -->
		<view class="dialog-bg" v-if="showRemarkDialog">
			<view class="dialog-remark">
				<view class="dialog-remark-top">
					<text>修改备注</text>
					<text @click="showRemarkDialog = false"><i class="iconfont icon-shanchu close">关闭</i></text>
				</view>
				<view class="dialog-remark-body">
					<view><input v-model="remark" class="uni-input input-style" focus placeholder="备注" maxlength="10" @input="getRemark" /></view>
					<view class="dialog-remark-tip">提示：*备注长度不能超过10个字符</view>
				</view>
				<button class="div-dialog-btn" @click="saveRemark" :disabled="disabled">保存</button>
			</view>
		</view>
		<!-- 切换运营商 -->
		<view class="div-dialog" v-if="showExchangeDialog">
			<view class="div-dialog-body" >
				<view class="div-dialog-body-title">
					<text>切换运营商</text>
					<text><i class="iconfont icon-shanchu close" @click="closePopup">关闭</i></text>
				</view>
				<view class="div-dialog-body-table">
					<view class="label">运营商：</view>
					<view class="value" style="border-bottom:none">
						<radio-group name="radio" @change="changeYYS" style="transform:scale(0.7);margin-right: -15%;">
							<radio value="CHINAMOBILE" class="radio-select" v-show="changeChinaMobile" :checked="wifi.yys=='CHINAMOBILE'"/><text :style="{'color':wifi.yys=='CHINAMOBILE'?'#007AFF':'#888','margin-right': '10px'}" v-show="changeChinaMobile">移动</text>
							<radio value="UNICOM" class="radio-select" v-show="changeUnicom" :checked="wifi.yys=='UNICOM'"/><text :style="{'color':wifi.yys=='UNICOM'?'#007AFF':'#888','margin-right': '10px'}" v-show="changeUnicom">联通</text>
							<radio value="TELECOM" class="radio-select" v-show="changeTelcom" :checked="wifi.yys=='TELECOM'"/><text :style="{'color':wifi.yys=='TELECOM'?'#007AFF':'#888'}" v-show="changeTelcom">电信</text>
						</radio-group>
					</view>
				</view>
				<view class="btn-line-dialog">
					<button class="btn" :loading="disabled" @click="saveExchange">保存</button>
				</view>
			</view>
		</view>
		<!--  修改WiFi名称 修改WiFi密码 隐藏WIFI热点 -->
		<view class="div-dialog" v-if="showDialog">
			<view class="div-dialog-body" >
				<view class="div-dialog-body-title" >
					<text>WiFi设置</text>
					<text @click="closePopup"><i class="iconfont icon-shanchu close">关闭</i></text>
				</view>
				<view class="div-dialog-body-table" >
					<view class="label">修改WiFi名称：(*请勿输入中文或空格)</view>
					<view class="value" :style="{'border-bottom':renameLine?'1px solid #78A8F2':'1px solid #e6e6e6'}">
						<input v-model="wifi.name" class="uni-input" placeholder-style="color:#999999" placeholder="请输入WiFi名称" @input='inputName'
						 :disabled="disabled" @focus="focusName" />
					</view>
					<view class="label">修改WiFi密码：(*请勿输入中文或空格)</view>
					<view class="value" :style="{'border-bottom':passwordLine?'1px solid #78A8F2':'1px solid #e6e6e6'}">
						<input v-model="wifi.password" class="uni-input" placeholder-style="color:#999999" placeholder="请输入WiFi密码" @input='inputPassword' :password="psdTypeFlag"
						 :disabled="disabled" @focus="focusPwd"  style="width: 80%;display: inline-flex;"/>
						 <i class="iconfont icon-yanjing" @click="psdTypeFlag = !psdTypeFlag" :style="{'color':psdTypeFlag?'#78A8F2':'#e6e6e6'}"></i>
					</view>
					<!-- 默认N，隐藏功能是传Y -->
					<view class="label">是否隐藏WiFi热点：</view>
					<view class="value" :style="{'border-bottom':hideLine?'1px solid #78A8F2':'1px solid #e6e6e6'}">
						<radio-group name="radio" @change="changeHide" style="transform:scale(0.7);margin-right: -15%;">
							<radio value="Y" class="radio-select" :checked="wifi.flag=='Y'"/><text :style="{'color':wifi.flag=='Y'?'#007AFF':'#888','margin-right': '10px'}" >是</text>
							<radio value="N" class="radio-select" :checked="wifi.flag=='N'"/><text :style="{'color':wifi.flag=='N'?'#007AFF':'#888'}" >否</text>
						</radio-group>
					</view>
				</view>
				<view class="btn-line-dialog">
					<button class="btn" :loading="disabled" @click="onSubmit">保存</button>
				</view>
			</view>
		</view>
		<!-- 点击复机按钮 弹出罩层 -->
		<view class="open-dialog" v-show="showOpenDialog">
			<view class="dialog_span">正在复机中，请勿关闭页面，如果复机时间特别长请稍后刷新重试。</view>
		</view>
		<pay-keyboard :show_key="show_key" @hideFun="hideFun" @getPassword="getPassword"></pay-keyboard>
	</view>
</template>

<script>
	import cmdProgress from "@/components/cmd-progress/cmd-progress.vue"
	import payKeyboard from '@/components/keyboard.vue'
	export default {
		components: {
			cmdProgress,
			payKeyboard
		},
		data() {
			return {
				logo: '',
				cardId: '',
				cardNumber: '',
				operatorName: '',
				time: '',
				card: {},
				showRemarkDialog: false, //修改备注弹窗
				remark: '', //弹窗内备注
				pagekey: '',
				disabled: false,
				cardList: [], //待启用套餐
				index: 0,
				num: 0,
				p1: '', //扇形1角度
				p2: '', //扇形2角度
				p3: '', //扇形2角度
				background_image: '',
				showOpenBtn: false,
				show_key: false,
				showRealNameBtn: false,
				showWifiExchange: false,
				// showWifiRename: false,
				// showWifiPassword: false,
				// showWifiHide: false,
				realNameLocation: '',
				batteryHeight: '',
				wifiStatus: '',
				showDialog: false,
				showExchangeDialog: false,
				// showWifiHideDialog: false,
				// showUpdatePasswordDialog: false,
				showWifiSettlement: false,
				// showRenameDialog: false,
				changeChinaMobile: false,
				changeUnicom: false,
				changeTelcom: false,
				renameLine: false,
				passwordLine: false,
				hideLine: false,
				psdTypeFlag: false,
				batteryFlag: false,
				wifiStatusFlag: false,
				showOpenDialog: false,
				dictDisplayLogoType: '',
				wifi: {
					yys: '',
					password:'',
					name: '',
					flag: 'N',
				},
				color: '#78A8F2',
				act: '',
				realNameCard: '',//设备卡实名时用的卡号
			}
		},
		onLoad(option) {
			let _this = this;
			this.cardId = option.cardId;
			this.cardNumber = option.cardNumber;
			this.operatorName = option.operatorName;
			this.time = option.time ? option.time : '';
			// if (option.operatorName == '电信') {
			// 	_this.logo = '../../../static/img/dianxin.svg';
			// } else if (option.operatorName == '移动') {
			// 	_this.logo = '../../../static/img/yidong.svg';
			// } else if (option.operatorName == '联通') {
			// 	_this.logo = '../../../static/img/liantong.svg';
			// } else {
			// 	_this.logo = '../../../static/img/weizhi.svg';
			// }
		},
		onShow() {
			// var ua = navigator.userAgent.toLowerCase();//获取判断用的对象
			// this.wxFlag = ua.match(/MicroMessenger/i) == "micromessenger"?true:false;
			this.getCardData();
			this.getEnableOrdersList();
		},
		methods: {
			//获取卡详情
			getCardData() {
				this.$req.userData('/card/getCardData', {
					id: this.cardId
				}).then(res => {
					if(this.showOpenDialog){
						uni.showToast({
							title: "数据提交成功",
							icon: "success",
							duration: 2000
						})
					}
					if (res.code==10000) {
						//接口查询是否显示实名按钮 是否显示开机按钮
						this.getBtnData();
						let item = res.data
						this.card = {
							dictChannelCardStatusName: item.dictChannelCardStatusName, //激活状态
							balance: item.balance ? item.balance : 0, //余额
							totalMb: '0MB', //总量
							usedFlow: '0MB', //已使用
							residue: '0MB', //剩余用量
							percentage: item.percentage, //剩余百分比
							ifShowRealName: item.ifShowRealName, //是否显示实名按钮
							realNameUrl: item.ifShowRealName ? item.realNameUrl : '', //实名连接
							expirationDate: item.expirationDate == null ? '--' : item.expirationDate, //过期时间
							dictCardOperatorName: item.dictCardOperatorName, //卡类型
							dictOperator: item.dictOperator, //判断是否可以展示机卡重绑按钮
							dictCardType: item.dicType,	//区分是设备卡还是普通卡板
							
							
						}
						this.showOpenBtn = item.ifOpenButton//判断当前卡所属通道是否支持复机
						if (item.totalMb) {
							this.card.totalMb = this.$toGB.exe(item.totalMb);
						}
						if (item.usedFlow) {
							this.card.usedFlow = this.$toGB.exe(item.usedFlow);
						}
						if (item.residue) {
							this.card.residue = this.$toGB.exe(item.residue);
						}
			
						let a = 100 - item.percentage;
						this.p1 = (360 - parseInt(a / 100 * 360)) + 'deg';
						this.p2 = a + '%';
						this.p3 = item.percentage + '%';
						if (item.dictChannelCardStatus == 'ACTIVATE') {
							this.card.statusBg = 'div-item-status-success'
						} else if (item.dictChannelCardStatus == 'DEACTIVATED') {
							this.card.statusBg = 'div-item-status-warning'
						} else if (item.dictChannelCardStatus == 'REACTIVATE') {
							this.card.statusBg = 'div-item-status-primary'
						} else if (item.dictChannelCardStatus == 'PAUSE') {
							this.card.statusBg = 'div-item-status-danger'
						} else if (item.dictChannelCardStatus == 'TERMINATED') {
							this.card.statusBg = 'div-item-status-chaiji'
						} else if (item.dictChannelCardStatus == 'STATUS_NONE' || item.dictChannelCardStatus == '') {
							this.card.statusBg = 'div-item-status-info'
						}
						if(item.dicType==='DONGLE'&&item.picture){
							if(item.dictDisplayLogoType=='FLOW_CARD_LOGO'){//跟随卡板运营商
								if(item.dictCardOperatorName=='电信'){
									this.logo = '../../../static/img/dianxin.svg'
								}
								else if(item.dictCardOperatorName=='联通'){
									this.logo = '../../../static/img/liantong.svg'
								}
								else if(item.dictCardOperatorName=='移动'){
									this.logo = '../../../static/img/yidong.svg'
								}
							}
							else if(item.dictDisplayLogoType=='SPECIAL_LOGO'){//上传特殊logo
								this.logo = item.picture
							}
							else if(item.dictDisplayLogoType=='DISPLAY_NONE_LOG'){//强制不显示
								this.logo = '';
							}
						}
						else{
							if(item.dictCardOperatorName=='电信'){
								this.logo = '../../../static/img/dianxin.svg'
							}
							else if(item.dictCardOperatorName=='联通'){
								this.logo = '../../../static/img/liantong.svg'
							}
							else if(item.dictCardOperatorName=='移动'){
								this.logo = '../../../static/img/yidong.svg'
							}else if(item.dictCardOperatorName=='广电'){
								this.logo = '../../../static/img/guangdian.png'
							}
						}
						if (item.dicType == 'DONGLE') {
							// this.showWifiRename = item.modifyWifiName=='true'?true:false;
							// this.showWifiPassword = item.modifyWifiPassword=='true'?true:false;
							// this.showWifiHide = item.ifDisplayWifiName=='true'?true:false;
							this.realNameCard = item.realNameCard
							this.changeChinaMobile = item.changeChinaMobile=='true'?true:false;
							this.changeUnicom = item.changeUnicom=='true'?true:false;
							this.changeTelcom = item.changeTelcom=='true'?true:false;
							this.showWifiExchange = (item.changeChinaMobile || item.changeUnicom || item.changeTelcom)? true : false;
							this.showWifiSettlement = item.wifiSetting ? true : false;
							this.wifiStatusFlag = item.siglte?true:false; //wifi信号是否回显
							this.wifiStatus = item.siglte?item.siglte:''; //wifi信号
							this.batteryFlag = item.battery?true:false;
							this.batteryHeight = this.batteryFlag?item.battery:'0%'; //电池电量
							this.dictDisplayLogoType = item.dictDisplayLogoType; //LOGO显示类型
							if(item.dictDisplayLogoType=='SPECIAL_LOGO'){
								this.logo = item.picture;
							}
							// this.card.dictCarrier = item.dictCarrier;
							// this.wifi.yys = item.dictCarrier;
							this.wifi.name = item.dongleAcc;
							this.wifi.password = item.donglePwd;
							this.wifi.flag = item.dongleAphide;
							
						}
						this.showOpenDialog = false;
					}
				})
			},
			//接口查询是否显示实名按钮 是否显示开机按钮
			async getBtnData() {
				let _this = this;
				this.$req.userRecharge("customer-order/realNameCheck", {
					id: this.cardId
				}).then(respon => {
					if(respon.code==10000){
						this.showRealNameBtn = respon.data.display;
						this.realNameLocation = respon.data.display ? respon.data.realNameUrl : '';
						this.card.realName = respon.data.realNameStatus; //是否实名
					}
				})
			},
			//修改卡备注
			async changeCardRemark() {
				this.remark = '';
				this.showRemarkDialog = true;
				this.pagekey = await this.$getPageKey();
			},
			//获取用户输入的备注
			getRemark(event) {
				this.remark = event.target.value;
			},
			//保存备注
			async saveRemark() {
				if (this.remark == '') {
					this.$message("备注不能为空")
					return
				}
				if (this.remark.length > 10) {
					this.$message("备注长度不能超过10")
					return
				}
				this.disabled = true;
				this.$req.userData("card-customer/updateCardRemark/recheck", {
					cardId: this.cardId,
					remark: this.remark,
					pagekey: this.pagekey
				}).then(() => {
					this.$message("修改成功！")
					this.showRemarkDialog = false;
				})
				setTimeout(() => {
					this.disabled = false;
				}, 5000)
				this.pagekey = await this.$getPageKey();
			},
			//跳转页面 实名连接
			goToRealNamePage() {
				window.location.href = `${this.realNameLocation}`
			},
			//点击开机按钮 执行开机
			goToBootUp() {
				let _this = this;
				this.showOpenDialog = true;
				this.$req.userData('card/resetCard', {
					id: this.cardId
				}).then(res => {
					if (res.data) {
						_this.getCardData();
						
					}
					else{
						uni.showToast({
							title: "数据提交失败，请两分钟后重试当前操作",
							icon: "none",
							duration: 2000
						})
						_this.showOpenDialog = false;
					}
				})
			},
			//跳转页面 机卡重绑
			goToBindPage(page) {
				let _this = this;
				if (this.card.dictOperator == 'TELECOM') {
					uni.navigateTo({
						url: `${page}?cardId=${this.cardId}&cardNumber=${this.cardNumber}`
					})
				}
				if (this.card.dictOperator == 'CMPTELECOM') {
					uni.showModal({
						title: '提示',
						content: '是否立即机卡重绑？机卡重绑后请继续前往操作记录查看结果',
						success: function(res) {
							if (res.confirm) {
								_this.$req.userRecharge('card/cmpUnlock', {
									id: _this.cardId
								}).then(response => {
									uni.showToast({
										title: '请前往操作记录查看结果',
										icon: 'none',
										duration: 2000
									});
								})
							} else if (res.cancel) {
								uni.showToast({
									title: '已取消机卡重绑操作',
									icon: 'none',
									duration: 2000
								});
							}
						}
					});
				}
				if (this.card.dictOperator == 'HEYOUWULIAN') {
					uni.showModal({
						title: '提示',
						content: '是否立即机卡重绑？机卡重绑后请继续前往操作记录查看结果',
						success: function(res) {
							if (res.confirm) {
								_this.$req.userRecharge('card/hywlUnlock', {
									id: _this.cardId
								}).then(response => {
									uni.showToast({
										title: '请前往操作记录查看结果',
										icon: 'none',
										duration: 2000
									});
								})
							} else if (res.cancel) {
								uni.showToast({
									title: '已取消机卡重绑操作',
									icon: 'none',
									duration: 2000
								});
							}
						}
					});
				}
				if (this.card.dictOperator == 'ZHANGZHONG') {
					uni.showModal({
						title: '提示',
						content: '是否立即机卡重绑？机卡重绑后请继续前往操作记录查看结果',
						success: function(res) {
							if (res.confirm) {
								_this.$req.userRecharge('card/zhangZhongUnlock', {
									id: _this.cardId
								}).then(response => {
									uni.showToast({
										title: '请前往操作记录查看结果',
										icon: 'none',
										duration: 2000
									});
								})
							} else if (res.cancel) {
								uni.showToast({
									title: '已取消机卡重绑操作',
									icon: 'none',
									duration: 2000
								});
							}
						}
					});
				}
				if (this.card.dictOperator == 'TIANYI') {
					uni.showModal({
						title: '提示',
						content: '是否立即机卡重绑？机卡重绑后请继续前往操作记录查看结果',
						success: function(res) {
							if (res.confirm) {
								_this.$req.userRecharge('card/tianYiUnlock', {
									id: _this.cardId
								}).then(response => {
									uni.showToast({
										title: '请前往操作记录查看结果',
										icon: 'none',
										duration: 2000
									});
								})
							} else if (res.cancel) {
								uni.showToast({
									title: '已取消机卡重绑操作',
									icon: 'none',
									duration: 2000
								});
							}
						}
					});
				}
			},
			//跳转页面 -- 订单列表
			gotoOrder(page, tab) {
				uni.setStorage({
					key: 'cardId',
					data: this.cardId
				})
				uni.setStorage({
					key: 'cardNumber',
					data: this.cardNumber
				})
				uni.setStorage({
					key: 'tab',
					data: tab
				})
				uni.switchTab({
					url: page
				})
			},
			//跳转页面 统一方法
			goToOtherPage(page) {
				if (page.indexOf('rechargeRecord') > 0) {
					uni.switchTab({
						url: `${page}`
					})
				} else {
					uni.navigateTo({
						url: `${page}?cardId=${this.cardId}&cardNumber=${this.cardNumber}&operatorName=${this.operatorName}`
					})
				}

			},
			//跳转至充值余额页面
			goToRechargeSetmeal() {

				if (this.cardNumber && this.card.dictCardOperatorName) {
					let u = "";
					if (this.card.expirationDate != null) {
						u = "&time=" + this.card.expirationDate
					}
					let uri = '/pages/tabbar/recharge/newBalanceRecharge?cardId=' + this.cardId
					let httpsHostUrl = window.location.host + "/" + uri

					if (this.card.realNameUrl != null && this.card.realNameUrl != '') {
						httpsHostUrl = encodeURIComponent(httpsHostUrl)
						let redir = this.card.realNameUrl + "&_redir=" + window.btoa(httpsHostUrl)
						location.href = redir
					} else {
						uni.navigateTo({
							url: '/pages/tabbar/recharge/newBalanceRecharge?cardId=' + this.cardId + "&cardNumber=" + this.cardNumber + u +
								"&operatorName=" + this.operatorName
						});
					}
				} else {
					uni.showToast({
						title: '数据加载中，请稍后再试',
						duration: 2000
					});
				}

			},
			//跳转至订购套餐页面
			goToRecharge() {
				uni.navigateTo({
					url: '/pages/tabbar/recharge/bookPackage?cardId=' + this.cardId + "&cardNumber=" + this.cardNumber +
						"&operatorName=" + this.operatorName
				});
			},
			
			//查看待启用套餐
			getEnableOrdersList() {
				this.cardList = []
				this.$req.userData('/card/listTobeEnableOrders', {
					id: this.cardId
				}).then(v => {
					if (v.data) {
						v.data.map(item => {
							this.cardList.push(item)
						})
					}
				})
			},
			//点击查看待启用套餐
			checkEnableOrdersList() {
				if (this.cardList.length == 0) {
					uni.showToast({
						title: '暂无待启用套餐',
						duration: 2000,
						icon: 'none'
					})
				}
			},
			goToWifiAct(k){
				this[k] = true;
				if(k=='showExchangeDialog'){
					this.wifi.yys = ''
				}
			},
			//删除卡
			goToDelete() {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定解绑此卡么',
					success: function(res) {
						if (res.confirm) {
							that.$req.userData('card-customer/untyingCard', {
								cardId: that.cardId,
								cardNumber: that.cardNumber
							}).then(v => {
								if(v.code==10000){
									uni.showToast({
										duration: 2000,
										title: '删除成功',
										icon: 'success'
									})
									uni.switchTab({
										url:'../tabbar/cardList/index'
									})
								}
							})
						} else if (res.cancel) {}
					}
				});
			},
			closePopup(){
				this.showDialog = false;
				this.showExchangeDialog = false;
				this.show_key = false;
				
			},
			enableChange: function(e) {
				this.index = e.detail.value
			},
			hideFun() {
				this.show_key = false
			},
			//切换运营商
			changeYYS(e){
				this.wifi.yys = e.detail.value;
				// this.card.dictCarrier = e.detail.value;
			},
			//隐藏wifi
			changeHide(e){
				this.wifi.flag = e.detail.value;
			},
			inputName(e){
				this.wifi.name = e.detail.value;
			},
			inputPassword(e){
				this.wifi.password = e.detail.value
			},
			focusName(e){
				// this.wifi.name = '';
				this.renameLine = true;
				this.hideLine = false;
				this.passwordLine = false;
			},
			focusPwd(e){
				// this.wifi.password = '';
				this.renameLine = false;
				this.hideLine = false;
				this.passwordLine = true;
			},
			saveExchange(){
				if(!this.wifi.yys){
					uni.showToast({
						title: '请选择要切换的运营商',
						icon: 'none',
						duration: 3000
					})
					return false;
				}
				this.show_key = true
				this.act = 'exchange'
			},
			onSubmit(){
				if(!this.wifi.name){
					uni.showToast({
						title: '请输入WiFi名称',
						icon: 'none',
						duration: 3000
					})
					return false;
				}
				if(!this.wifi.password){
					uni.showToast({
						title: '请输入密码',
						icon: 'none',
						duration: 3000
					})
					return false;
				}
				if(!this.wifi.flag){
					uni.showToast({
						title: '请选择是否隐藏WiFi热点',
						icon: 'none',
						duration: 3000
					})
					return false;
				}
				this.show_key = true
				this.act = 'other'
			},
			async getPassword(n){
				let password = n.password;
				let form = {cardPassword: n,id:this.cardId};
				if(this.showExchangeDialog){
					this.$req.userRecharge('card/switchOperator',{
						cardPassword: n,
						id: this.cardId,
						operator: this.wifi.yys
					}).then(res=>{
						if(res.code=='10000'){
							uni.showToast({
								icon:'none',
								title: "修改成功！当前操作5-10分钟后生效，请勿频繁操作！",
								duration: 3000
							})
						}
						else{
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								duration: 3000
							})
						}
					})
				}
				else{
					form.userName = this.wifi.name;
					form.password = this.wifi.password;
					form.aphide = this.wifi.flag;//默认N，隐藏功能是传Y
					
					this.$req.userRecharge('card/setNameAndPassword',form).then(res=>{
						if(res.code=='10000'){
							uni.showToast({
								icon:'none',
								title: "修改成功！当前操作5-10分钟后生效，请勿频繁操作！",
								duration: 3000
							})
						}
						else{
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								duration: 3000
							})
						}
					})
				}
				this.closePopup()
			}
		}
	}
</script>

<style lang="less">
	.bg {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background: #FFFFFF;

	}

	.top-bg {
		width: 100%;
		height: 25%;
		background-image: linear-gradient(to bottom, #B3D2F4 0, #E0EFFF 100%);
		position: fixed;
		top: 0;
		left: 0;
		border-radius: 0 0 10% 10%;
		z-index: 1;
	}

	.card-line {
		width: 96%;
		height: 120upx;
		position: relative;
		top: 0;
		left: 2%;
		background-color: none;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 36upx;
		padding: 20upx 0;
		color: #333333;
		z-index: 2;
		font-weight: 700;
	}

	.img-logo {
		height: auto;
		width: auto;
		max-width: 30%;
		max-height: 80%;
		position: relative;
	}

	.status-line {
		width: 96%;
		height: 60upx;
		position: relative;
		top: 0;
		left: 2%;
		background-color: none;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28upx;
		color: #333333;
		z-index: 2;
		margin-bottom: 20upx;
		margin: 20upx 0;
	}

	.div-item-status {
		width: auto;
		height: 100%;
		text-align: center;
		line-height: 50upx;
		color: #FFFFFF;
		
		font-size: 22upx;
		padding: 0 20upx;
		border-radius: 2px;
		display: flex;
		align-items: center;
		background-color: rgba(255,255,255,0);
	}

	.div-item-status-success {
		background-image: linear-gradient(-225deg, #3CB371 0%, #90EE90 100%);
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
	}

	.div-item-status-warning {
		background-image: linear-gradient(-225deg, #FF6347 0%, #FFA07A 100%);
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
	}

	.div-item-status-info {
		background-image: linear-gradient(-225deg, #808080 0%, #C0C0C0 100%);
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
	}

	.div-item-status-primary {
		background-image: linear-gradient(-225deg, #4169E1 0%, #AFC0F3 100%);
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
	}

	.div-item-status-danger {
		background-image: linear-gradient(-225deg, #991919 0%, #EC816E 100%);
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
	}

	.div-item-status-chaiji {
		background-image: linear-gradient(-225deg, #BF8D17 0%, #E8B845 100%);
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
	}

	.div-item-status-shiming {
		background-image: linear-gradient(135deg, #119E50 0%, #2BCC72 100%);
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
	}

	.div-item-status-img {
		max-width: auto;
		max-height: 60%;
		margin-right: 5px;
	}

	.flow-block {
		width: 96%;
		height: auto;
		position: relative;
		top: 0;
		left: 2%;
		background-image: linear-gradient(to bottom, #CBE4FF 0%, #EEF6FF 100%);
		border-radius: 10upx;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		margin: 40upx 0;
	}

	.flow-block-top {
		width: 100%;
		height: 240upx;
		position: relative;
		top: 0;
		left: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-top: 1px solid #FFFFFF;
		border-bottom: 1px solid #FFFFFF;
	}

	.flow-block-top-item {
		width: 25%;
		height: 100%;
		position: relative;
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.flow-block-top-body {
		width: 200upx;
		height: 100%;
		position: relative;
		text-align: center;
		line-height: 240upx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.circle {
		width: 180upx;
		height: 180upx;
		border-radius: 50%;
		z-index: 1;
		display: inline-block;
		left: 0;
		top: 0;
	}

	.sss {
		width: 160upx;
		height: 160upx;
		z-index: 10;
		position: absolute;
		left: 20upx;
		top: 40upx;
		background-image: linear-gradient(to bottom, #CBE4FF 0%, #EEF6FF 100%);
		border-radius: 50%;
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.flow-block-top-item-circle {
		width: 180upx;
		height: 180upx;
		position: relative;
		border-radius: 50%;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	}

	.flow-block-top-item-num {
		font-size: 28upx;
		line-height: 50upx;
		color: #555;
	}

	.flow-block-top-item-text {
		font-size: 24upx;
		line-height: 50upx;
		color: #777;
	}

	.flow-block-bottom {
		width: 92%;
		height: 100upx;
		position: relative;
		top: 0;
		left: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28upx;
		padding: 0 4%;
		color: #777;
	}

	.flow-block-bottom-obj {
		width: 45%;
		display: inline-flex;
		justify-content: flex-start;
		align-items: center;
	}

	.flow-block-bottom-btn {
		color: #007AFF;
		display: inline-flex;
		align-items: center;
	}

	.btn-line {
		width: 96%;
		height: auto;
		position: relative;
		top: 0;
		left: 2%;
		padding: 20upx 0;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
		align-content: center;
		background-color: rgba(255, 255, 255, 0.5);
		border-radius: 10upx;
		margin-top: 20upx;
	}

	.btn-line-item {
		width: 24vw;
		height: 20vw;
		position: relative;
		top: 0;
		left: 0;
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

	}

	.btn-line-item-icon {
		width: 40upx;
		height: 40upx;
		font-size: 30upx;
		color: #ffffff;
		margin-bottom: 10upx;
		background-image: linear-gradient(120deg, #A0C6FF 0%, #408CFF 100%);
		border-radius: 50%;
		padding: 10upx;
		text-align: center;
		line-height: 40upx;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
	}

	.btn-line-item-icon-none {
		width: 40upx;
		height: 40upx;
		font-size: 30upx;
		color: #ffffff;
		margin-bottom: 10upx;
		background-image: linear-gradient(to left, #BDBBBE 0%, #9D9EA3 100%), radial-gradient(88% 271%, rgba(255, 255, 255, 0.25) 0%, rgba(254, 254, 254, 0.25) 1%, rgba(0, 0, 0, 0.25) 100%), radial-gradient(50% 100%, rgba(255, 255, 255, 0.30) 0%, rgba(0, 0, 0, 0.30) 100%);
		background-blend-mode: normal, lighten, soft-light;
		border-radius: 50%;
		padding: 10upx;
		text-align: center;
		line-height: 40upx;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
	}

	.btn-line-item-text {
		font-size: 28upx;
		/* color: #408CFF; */
		color: #777;
		line-height: 40upx;
	}

	/* -----------------修改备注弹窗------------ */
	.dialog-bg {
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 0;
		left: 0;
		/* display: flex;
		justify-content: center;
		align-items: center; */
		z-index: 5;
	}

	.dialog-remark {
		width: 100%;
		height: auto;
		position: absolute;
		bottom: 0;
		left: 0;
		background-image: linear-gradient(45deg, #FFFFFF 0%, #ECF1FF 100%);
		border-radius: 4px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	}

	.dialog-remark-top {
		width: 96%;
		height: 70upx;
		position: relative;
		top: 0;
		left: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 2%;
		border-bottom: 1px solid #e6e6e6;
		color: #333;
		font-size: 28upx;
	}

	.close {
		color: #999;
		font-size: 28upx;
	}

	.dialog-remark-body {
		width: 96%;
		height: auto;
		position: relative;
		top: 0;
		left: 2%;

	}

	.input-style {
		width: 84%;
		height: 60upx;
		position: relative;
		top: 0;
		left: 0;
		border: 1px solid #007AFF;
		background-color: rgba(255, 255, 255, 0);
		border-radius: 4px;
		margin: 10px 5% 0 5%;
	}

	.dialog-remark-tip {
		width: 90%;
		height: 70upx;
		position: relative;
		left: 5%;
		line-height: 70upx;
		font-size: 28upx;
		color: #999;

	}

	.div-dialog-btn {
		width: 90%;
		height: 70upx;
		position: relative;
		margin: 10px 5% 20px 5%;
		line-height: 70upx;
		background: linear-gradient(to bottom, #A0C6FF 0%, #408CFF 100%);
		color: #fff;
		letter-spacing: 3px;
		font-size: 28upx;
		text-align: center;
		border-radius: 5px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	}

	.u-progress-content {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.u-progress-dot {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50%;
		background-color: #fb9126;
	}

	.u-progress-info {
		font-size: 28rpx;
		padding-left: 16rpx;
		letter-spacing: 2rpx
	}

	/* wifi样式 */
	.flow-block-bottom-wifi {
		width: 20px;
		height: 14px;
		margin-left: 5px;
		position: relative;
		display: inline-flex;
		justify-content: space-between;
		align-items: flex-end;
		margin-top: 0;
	}

	.wifi-circle {
		border: 2px solid #ccc;
		border-radius: 50%;
		position: absolute;
	}

	.first {
		width: 40px;
		height: 40px;
		top: 0;
		left: 0;
	}
	.first_animate{
		animation: run1 4s linear infinite;
	}
	@keyframes run1 {
		0% {
			border-color: #ccc;
		}

		25% {
			border-color: #ccc;
		}

		50% {
			border-color: #ccc;
		}

		75% {
			border-color: #ccc;
		}

		100% {
			border-color: #4CD964;
		}
	}

	.second {
		width: 30px;
		height: 30px;
		top: 5px;
		left: 5px;
	}
	.second_animate{
		animation: run2 4s linear infinite;
	}
	@keyframes run2 {
		0% {
			border-color: #ccc;
		}

		25% {
			border-color: #ccc;
		}

		50% {
			border-color: #ccc;
		}

		75% {
			border-color: #4CD964;
		}

		100% {
			border-color: #ccc;
		}
	}

	.third {
		width: 20px;
		height: 20px;
		top: 10px;
		left: 10px;
	}
	.third_animate{
		animation: run3 4s linear infinite;
	}
	@keyframes run3 {
		0% {
			border-color: #ccc;
		}

		25% {
			border-color: #ccc;
		}

		50% {
			border-color: #4CD964;
		}

		75% {
			border-color: #ccc;
		}

		100% {
			border-color: #ccc;
		}
	}

	.fourth {
		width: 10px;
		height: 10px;
		background: #ccc;
		top: 15px;
		left: 15px;
		animation: run4 4s linear infinite;
	}
	
	@keyframes run4 {
		0% {
			background: #ccc;
			border-color: #ccc;
		}

		25% {
			background: #4CD964;
			border-color: #4CD964;
		}

		50% {
			background: #ccc;
			border-color: #ccc;
		}

		75% {
			background: #ccc;
			border-color: #ccc;
		}

		100% {
			background: #ccc;
			border-color: #ccc;
		}
	}

	/* 电池 */
	.battery-container {
		width: 15px;
		height: auto;
		overflow: hidden;
		position: relative;
		display: inline-block;
		margin-left: 10px;
	}

	.battery-head {
		width: 6px;
		height: 2px;
		position: relative;
		top: 0;
		left: 4px;
		border-radius: 4px;
		background-color: #999;
	}

	.battery-body {
		width: 12px;
		height: 20px;
		position: relative;
		top: 0;
		left: 0;
		margin: 1px 0;
		border: 1px solid #999;
		border-radius: 2px;
		background-color: #f2f2f2;
	}

	.battery-content {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #4CD964;
		border-radius: 2px;
		margin: 0 1% 1% 1%;
	}
	/* 弹窗样式 */
	.div-dialog{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0,0,0,0.7);
		z-index: 15;
	}
	.div-dialog-body{
		width: 100%;
		height: auto;
		position: absolute;
		bottom: 0;
		left: 0;
		background-image: linear-gradient(45deg, #FFFFFF 0%, #ECF1FF 100%);
		z-index: 7;
		border-radius: 4px 4px 0 0;
	}
	.div-dialog-body-title{
		width: 94%;
		height: 70upx;
		position: relative;
		top: 0;
		left: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28upx;
		color: #78A8F2;
		padding: 10upx 3%;
	}
	.div-dialog-body-table{
		width: 82%;
		height: auto;
		position: relative;
		padding-bottom: 20upx;
		display: flex;
		flex-direction: column;
		overflow-y: scroll;
		align-items: center;
		justify-content: flex-start;
		margin: 1% 5%;
		z-index: 6;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		border-radius: 4px;
		padding: 0 4% 20upx 4%;
	}
	.label{
		width: 100%;
		height: 50upx;
		position: relative;
		line-height: 50upx;
		font-size: 28upx;
		color: #333333;
		margin-top: 10px;
	}
	.value{
		width: 100%;
		height: 80upx;
		position: relative;
		border-bottom: 1px solid #e6e6e6;
		text-align: right;
	}
	.uni-input {
	    height: 50upx;
	    line-height: 25px;
	    font-size: 30upx;
	    background: rgba(255,255,255,0);
	    -webkit-box-flex: 1;
	    -webkit-flex: 1;
	    flex: 1;
	}
	.btn-line-dialog{
		width: 90%;
		height: 70upx;
		position: relative;
		margin: 20px 5%;
	}
	.btn{
		width: 100%;
		height: 80upx;
		text-align: center;
		line-height: 80upx;
		font-size: 30upx;
		color: #FFFFFF;
		background-image: linear-gradient(120deg, #A0C6FF 0%, #408CFF 100%);
		letter-spacing: 5px;
	}
	.close{
		color: #999;
		font-size: 28upx;
	}
	.one{
		height: 5px;
		width: 3px;
		background-color: #999;
		display: inline-flex;
		border-radius: 2px;
	}
	.two{
		height: 8px;
		width: 3px;
		background-color: #999;
		display: inline-flex;
		border-radius: 2px;
	}
	.three{
		height: 11px;
		width: 3px;
		background-color: #999;
		display: inline-flex;
		border-radius: 2px;
	}
	.four{
		height: 14px;
		width: 3px;
		background-color: #999;
		display: inline-flex;
		border-radius: 2px;
	}
	/* 新版卡操作 */
	.actBlock{
		width: 90%;
		height: auto;
		position: relative;
		top: 20upx;
		left: 5%;
	}
	.actLabel{
		width: 100%;
		height: 60upx;
		position: relative;
		top: 0;
		left: 0;
		font-size: 30upx;
		color: #007AFF;
		line-height: 60upx;
		text-indent: 20upx;
	}
	.actLine{
		width: 100%;
		height: 1px;
		background-image: linear-gradient(to right, #007AFF 0%, #c2e9fb 100%);
	}
	.btn-line_new {
		width: 100%;
		height: auto;
		position: relative;
		top: 0;
		left: 0;
		padding: 20upx 0;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
		align-content: center;
		background-color: rgba(255, 255, 255, 0.5);
		border-radius: 10upx;
		
	}
	
	.btn-line-item_new {
		width: 22vw;
		height: 20vw;
		position: relative;
		top: 0;
		left: 0;
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	
	}
	
	.btn-line-item-icon_new {
		width: 40upx;
		height: 40upx;
		font-size: 30upx;
		color: #ffffff;
		margin-bottom: 10upx;
		background-image: linear-gradient(120deg, #A0C6FF 0%, #408CFF 100%);
		border-radius: 50%;
		padding: 10upx;
		text-align: center;
		line-height: 40upx;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
	}
	
	.btn-line-item-icon-none_new {
		width: 40upx;
		height: 40upx;
		font-size: 30upx;
		color: #ffffff;
		margin-bottom: 10upx;
		background-image: linear-gradient(to left, #BDBBBE 0%, #9D9EA3 100%), radial-gradient(88% 271%, rgba(255, 255, 255, 0.25) 0%, rgba(254, 254, 254, 0.25) 1%, rgba(0, 0, 0, 0.25) 100%), radial-gradient(50% 100%, rgba(255, 255, 255, 0.30) 0%, rgba(0, 0, 0, 0.30) 100%);
		background-blend-mode: normal, lighten, soft-light;
		border-radius: 50%;
		padding: 10upx;
		text-align: center;
		line-height: 40upx;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
	}
	
	.btn-line-item-text_new {
		font-size: 28upx;
		/* color: #408CFF; */
		color: #777;
		line-height: 40upx;
	}
	//复机弹窗
	.open-dialog{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0,0,0,0.8);
		z-index: 15;
		display: flex;
		justify-content: center;
		align-items: center;
		
	}
	.dialog_span{
		margin: 010%;
		color: #fff;
		font-size: 24upx;
		z-index: 20;
		line-height: 30px;
		text-indent: 24px;
	}
</style>
